import Taro, { Component,Config } from "@tarojs/taro";
import { View, ScrollView, Image, Text } from "@tarojs/components";
import {IStoreProps} from '../../store/Stores'
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {getRuntime,subtime} from '../../utils/common'


import './index.less'
import './page3_detail.less'
import icon_33 from '../../assets/img/icon_33.png'
import icon_96 from '../../assets/img/icon_96.png'
import icon_97 from '../../assets/img/icon_97.png'
import icon_98 from '../../assets/img/icon_98.png'
import icon_99 from '../../assets/img/icon_99.png'
import Report from "../../components/Report";
import PageFooterInfo from '../../components/PageFooterInfo'

// 工商服务中心-资质转让服务-资质详情
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Page3_detail extends Component<IHomeProps>{
  constructor(props){
    super(props)
  }

  state = {
    allProvince: [],
    info:{},
    iconType: icon_96
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '资质转让详情'})
    let id = this.$router.params.id
    if(id){ this.getQualificationServiceCenterInfo(parseInt(id)) }
  }

  getAllProvince() {
    let { AreaStore } = this.props.stores
    AreaStore.getAllProvinceFromLocal({
      callBack: res => {
        //console.log(res)
        this.setState({
          allProvince: res
        })
      }
    })
  }

  getQualificationServiceCenterInfo(formId) {
    let { FinancialCenterStore } = this.props.stores
    FinancialCenterStore.getQualificationServiceCenterInfo({
      formId,
      callback: res => {
        let iconType = icon_96;
        switch (parseInt(res.qualificationsType)) {
          case 1: { iconType=icon_96; break }
          case 2: { iconType=icon_97; break }
          case 3: { iconType=icon_98; break }
          case 4: { iconType=icon_99; break }
          default: { iconType=icon_99; }
        }
        this.setState({
          iconType,
          info: res
        })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  getAreaTextByAreaCode(areaCode: number){
    let { allProvince } = this.state
    allProvince.map(item => {
      if(item.value === areaCode){
        return item.label
      } else{
        return areaCode
      }
    })
  }

  makePhone(phone: string) {
    if(!phone){getRuntime().showToast('用户未提交联系方式~')}
    getRuntime().makePhoneCall(phone)
  }

  render() {
    let { info,iconType } = this.state
    return(
     <View className='business-detail'>
       <View className='list-04-item'>
         <View className='top'>
           <View className='l'>
             <View className={'title'}>{info.title}</View>
             <View className={'price'}>{info.priceInterval }<Text className='list-small'>万</Text> </View>
           </View>
           <Image className='icon' src={iconType} />
         </View>
         <View className={'info'}>
           <Text className={'date'}>发布：{subtime(info.creationTime)}</Text>
           <Text className={'date'}>浏览：{info.numberOfVisits}人</Text>
         </View>
       </View>
       <View className='interval' />

       <View className='column-title content-30'>
         <Text className='column-name'>基本信息</Text>
       </View>
       <View className='item-lawyer'>
         <View className={'line'}>
           <Text className='title'>资质级别：</Text>
           <Text className='name'>{info.qualificationLevel}</Text>
         </View>
         <View className={'line'}>
           <Text className='title'>纳税类型：</Text>
           <Text className='name'>{info.taxpayerType}</Text>
         </View>
         <View className={'line'}>
           <Text className='title'>所在地区：</Text>
           <Text className='name'>{info.contactsArea}</Text>
         </View>
         <View className={'line'}>
           <Text className='title'>价格区间：</Text>
           <View className='name'>
             <Text>{info.priceInterval}万</Text>
           </View>
         </View>
       </View>
       <View className='interval' />

       <View className='column-title content-30'>
         <Text className='column-name'>备注</Text>
       </View>
       <View className={'item-lawyer-desc'}>
         {info.remarks}
       </View>
       <View className='interval' />

       <View className='column-title content-30'>
         <Text className='column-name'>联系方式</Text>
       </View>
       <View className='item-lawyer'>
         <View className='line'>
           <Text className='title'>联系人：</Text>
           <Text className='name'>{info.contactsName}</Text>
         </View>
         <View className='line'>
           <Text className='title'>联系电话：</Text>
           <Text className='name'>{info.contactsPhone}</Text>
         </View>
         <View className='line'>
           <Text className='title'>微信号：</Text>
           <Text className='name'>{info.contactsWechat}</Text>
         </View>
         <View className='line'>
           <Text className='title'>QQ号：</Text>
           <Text className='name'>{info.contactsQQ}</Text>
         </View>
       </View>
       <View className='interval' />

      <Report />
       <PageFooterInfo />
       <View className='footer-block' />
      <View className='page-submit' onClick={this.makePhone.bind(this,info.contactsPhone)}>立即电话咨询</View>

     </View>
    )
  }
}

export default Page3_detail
